<template>
  <div class="search">
    <div class="search_top">
      <!--搜索栏  -->
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <!-- 下拉菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item disabled title="全部" />
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          title="价格"
          @change="changePrice"
        />
        <van-dropdown-item 
          v-model="value2"
          :options="filterCategory"
          title="分类"
          @change="changeKind"
        />
      </van-dropdown-menu>
    </div>
    <!--  -->
    <ul>
      <li v-for="item in goodsList" :key="item.id" @click="gotoDatail(item.id)">
        <img :src="item.list_pic_url" alt="" />
        <p class="p1">{{ item.name }}</p>
        <p class="p2">{{ item.retail_price | formatMoney }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
// 引入搜索页数据
import { searchgoods } from "@/utils/http.js";
export default {
  name: "Search",
  data() {
    return {
      value1: "desc", // 由高到低
      // value2: 0, //默认值
      option1: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      // option2: [
      //   { text: "默认排序", value: "a" },
      //   { text: "好评排序", value: "b" },
      //   { text: "销量排序", value: "c" },
      // ],
      keyword: "", // 搜索关键字
      page: 1, // 默认页数
      size: 10, // 每页数据的条数
      order: "desc", // desc 由高到低  asc 由低到高
      categoryId: 0, // 商品类别id  全部 居家 服装  配件 ....
      sort: "id", // 排序方式 根据分类id 还是价格price
      goodsList: [], // 商品列表数据
      filterCategory: [], //所有的类别
    };
  },
  props: [""],
  components: {},
  methods: {
      // 点击搜索触发()
    onSearch(val) {
     
      this.getData();
      console.log(val);
    },
    // 点击取消触发
    onCancel(val) {
      this.$router.go(-1)
    },
    // 切换价格排序
    changePrice(m) {
      this.order = m
this.sort = 'price'
this.getData();
    },
    // 切换分类
    changeKind(n ) {
this.categoryId = n
this.sort = 'id'
      this.getData();
    },
    getData() {
      // 获取商品列表
      let params = {
        keyword: this.keyword, // 搜索的关键字
        page: this.page, // 默认页数
        size: this.size, // 每页数据的条数
        order: this.order, // desc 由高到低  asc 由低到高
        categoryId: this.categoryId, // 商品类别id  全部 居家 服装  配件 ....
        sort: this.sort, // 排序方式 根据分类id 还是价格price
      };

      searchgoods(params).then((res) => {
        console.log(res);
        this.goodsList = res.data.data.goodsList;
        this.filterCategory = res.data.data.filterCategory;
        // 将filterCategory 数组中的name 替换成text 将id 换成value 属性 利用字符串replace
        this.filterCategory = JSON.parse(JSON.stringify(this.filterCategory) .replace(/name/g,"text")
        .replace(/id/g,"value"))
       
      });
    },
    // 详情页
    gotoDatail(item){
console.log(item);
this.$router.push({'path':'/detail',query:{id:item}})
    }
  
  },
  created() {
    //    调用
    this.getData();
  },
  computed:{
    value2:{
      get(){
        var id = 0
      this.filterCategory.forEach(item => {
        if(item.checked){
          id = item.value
        }
      });
      return id
      },
      set(val){}
    }
  }
};
</script>
<style scoped lang='less'>
.search {
  .search_top{
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 999;
  }
  ul {
  padding-top: 15%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 50%;
      // padding: 5px;
      box-sizing: border-box;
      img {
        width: 100%;
        display: block;
      }
      p {
        font-size: 16px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .p2 {
        color: red;

        padding-top: 10px;
      }
    }
  }
}
</style>